<!-- 头部区域代码 -->
<header>
    <nav>
        <ul class="ul-left">
            <li><a href="../index.html">欢迎来到美域甄品！</a></li>
            <li class="aa"><a href="http://127.0.0.1:2113/html/login.html">请登录</a></li>
            <li class="bb"><a href="http://127.0.0.1:2113/html/login.html">快速注册</a></li>
            <li class="cc"><a href="#">尊敬的183xxxx9957用户</a></li>
        </ul>
        <ul class="ul-right">
            <li><a href="http://127.0.0.1:2113/html/order.html">我的订单</a></li>
            <li><a href="#">个人中心</a></li>
            <li><a href="http://127.0.0.1:2113/html/business.html">商家申请入驻</a></li>
            <li><a href="#">平台运营规范</a></li>
            <li><a href="#"><i class="iconfont icon-shouji"></i>手机版</a></li>
        </ul>
    </nav>
</header>
<div class="xi">
    <div class="xiDing">
        <img src="../img/4.png" alt="">
    
        <div class="box1">
            <ul>
                <li><a href="#">商品</a></li>
                <li><a href="#">店铺</a></li>
            </ul>
            <input type="text" placeholder="请输入您要搜索的关键字" class="clearInput search-input" />
            <button class="search">搜索</button>
        </div>
    
        <div class="all-right">
            <span class="xi-span">0</span>
            <a href="http://127.0.0.1:2113/html/cart.html"><i class="iconfont icon-gouwuche"></i>我的购物车</a>
        </div>
    </div>
</div>
<script>
    $(document).scroll(function () {
        //获取到滚动的距离
        let jl = $(document).scrollTop()
        if (jl >= $('.list-juan').offset().top) {
            $('.HUA>ul>li')[4].style.display ='block'
            $('.HUA')[0].style.position = 'fixed'
            $('.HUA')[0].style.top='60px'
            $('.xi').fadeIn()
            $('.xi')[0].style.display = 'flex'
            span1 = document.querySelector('.xi-span')
            let list = JSON.parse(localStorage.getItem('cart')) || []
            let num = 0
            //遍历进行数量增加
            list.forEach((item) => {
                num += item.cart_number
            })
            //给span标记进行赋值操作
            if (span1 !== null) {
                span1.innerHTML = num
            }
        } else {
            $('.xi').fadeOut()
            $('.HUA>ul>li')[4].style.display ='none'
            $('.HUA')[0].style.position = 'absolute'
            $('.HUA')[0].style.top='415px'
        }
    })

    $('.HUA>ul>li')[4].click(function(){
            $('html').stop().animate({
                scrollTop: 0
            }, 500)
        })
</script>